import React from "react";
import {useAppSelector} from "@/store/hooks";
import useCompletedTasks from "../hooks/useCompletedTasks";
import useTodayTasks from "../hooks/useTodayTasks";

const TasksDone: React.FC = () =>
{
    const todaysTasks = useTodayTasks();
    const tasks = useAppSelector((state) => state.tasks.tasks);
    const { tasks: todayTasksDone } = useCompletedTasks({
        tasks: todaysTasks,
        done: true,
    });
    const { tasks: allTasksDone } = useCompletedTasks({
        tasks: tasks,
        done: true,
    });
    // console.log(todayTasksDone.length, allTasksDone.length)

    const percentageTodayTasks =
        (todayTasksDone.length * 100) / todaysTasks.length;

    const percentageAllTasks = (allTasksDone.length * 100) / tasks.length;

    const todaysTasksToShow = todaysTasks.slice(0, 3);

    const showMore = todaysTasks.length > todaysTasksToShow.length;

    return (
        <>
            <div className="hidden lg:block">
                {todaysTasks.length !== 0 && (
                    <div className="mb-8">
          <span className="flex justify-between mb-5">
            <span>今天代办任务</span> {todayTasksDone.length}/
              {todaysTasks.length}
          </span>
                        <div className="barProgress">
                            <div style={{ width: percentageTodayTasks + "%" }}></div>
                        </div>
                    </div>
                )}
                {tasks.length !== 0 && (
                    <div className="">
          <span className="flex justify-between mb-2">
            <span className="mr-28">任务数量</span> {allTasksDone.length}/{tasks.length}
          </span>
                        <div className="barProgress">
                            <div style={{ width: percentageAllTasks + "%" }}></div>
                        </div>
                    </div>
                )}
            </div>
        </>
    );
};

export default React.memo(TasksDone);
